<template>
    <div class="app-container">
        <el-button size="mini" @click="$router.go(-1)">返回</el-button>
        <div class="user-unit-box">
            <div class="user-unit-box-right">
                <div class="edit_content">
                    <div class="tab_area">
                        <div class="tab-conetnt">
                            <div class="tabs" @click="tabSelect(1)" :class="[active == 1 ? 'checked' : 'notChecked']">
                                可选数据</div>
                            <div class="tabs" @click="tabSelect(2)" :class="[active == 2 ? 'checked' : 'notChecked']">
                                已选数据</div>
                        </div>
                        <div class="line"></div>
                        <div class="slider" :style="sliderStyle"></div>
                    </div>
                </div>
                <div style="display: flex;">
                    <div class="user-unit-box-left" v-if="active == 1">
                        <div class="head-container">
                            <div class="tree-box">
                                <el-tree height="600" :data="treeData" :props="defaultProps"
                                    :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree"
                                    default-expand-all @node-click="handleNodeClick" />
                            </div>
                        </div>
                    </div>
                    <el-table v-if="active == 1" v-loading="listLoading" :row-key="getRowKeys"
                        @selection-change="handleSelectionChange" ref="selectTable" :data="tableData"
                        element-loading-text="Loading" border height="550px" class="table-container"
                        highlight-current-row>
                        <el-table-column type="selection" :reserve-selection="true" align="center"></el-table-column>
                        <el-table-column type="index" label="序号" prop width="50"></el-table-column>
                        <el-table-column label="模块名称" align="center" prop="module"> </el-table-column>
                        <el-table-column label="表格名称" align="center" prop="tableName" width="600"> </el-table-column>
                        <el-table-column label="表注释" align="center" prop="annotations"></el-table-column>
                        <el-table-column label="类型" align="center" prop="type"></el-table-column>
                    </el-table>
                </div>
                <div>
                    <div class="filter-container" style="margin-top: 10px;">
                        <el-input v-if="active == 2" v-model="ztName" size="small" placeholder="请输入专题名称" clearable
                            class="filter-item w-200" />
                    </div>
                    <el-table v-if="active == 2" :data="tableData2" element-loading-text="Loading" border height="550px"
                        class="table-container" highlight-current-row>
                        <el-table-column type="index" label="序号" prop width="50"></el-table-column>
                        <el-table-column label="模块名称" align="center" prop="module"> </el-table-column>
                        <el-table-column label="表格名称" align="center" prop="tableName" width="600"> </el-table-column>
                        <el-table-column label="表注释" align="center" prop="annotations"></el-table-column>
                        <el-table-column label="类型" align="center" prop="type"></el-table-column>
                        <el-table-column label="操作" align="center" prop="rowTotal" width="200">
                            <template slot-scope="scope">
                                <el-button size="mini" type="text" @click="handleDelete(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

            </div>
        </div>
        <!-- <pagination style="margin-top: 20px" v-show="total > 0 && active == 1" :total="total"
            :page.sync="listQuery.pageNo" :limit.sync="listQuery.pageSize" /> -->
        <el-button style="margin-top: 20px" v-if="active == 2" type="primary" @click="submit">提交</el-button>
    </div>
</template>

<script>
import { tableManagerList, saveBigSrceenData, getBigSrceenById } from '@/http/api/myHttp.js'

export default {
    components: {},
    data() {
        return {
            ztName: "",
            listQuery: {
                pageNo: 1,
                pageSize: 10000
            },
            treeData: [
                {
                    name: '物联感知数据',
                    value: '物联感知数据'
                },
                {
                    name: '结果数据',
                    value: '结果数据'
                },
                {
                    name: '基础数据',
                    value: '基础数据'
                },
                {
                    name: '市级数据',
                    value: '市级数据'
                },
                {
                    name: '区级数据',
                    value: '区级数据'
                },
                {
                    name: '业务数据',
                    value: '业务数据'
                },
                {
                    name: '视频数据',
                    value: '视频数据'
                }
            ],
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            total: 0,
            listLoading: false,
            tableData: [],
            active: 1,
            tableData2: [],
        }
    },
    created() {
    },
    computed: {
        sliderStyle() {
            return {
                transform: this.active === 1 ? 'translateX(0%)' : 'translateX(100%)'
            }
        }
    },
    methods: {
        submit() {
            if (!this.ztName) {
                this.$message.warning("请输入专题名称")
                return
            }
            if (this.tableData2.length == 0) {
                this.$message.warning("请选择数据表")
                return
            }
            let tables = this.tableData2.map(item => item.objectId)
            let params = {
                title: this.ztName,
                tables: JSON.stringify(tables)
            }
            if(this.$route.query.type == 'edit') {
                const rowData = JSON.parse(this.$route.query.rowData)
                params.objectId = rowData.objectId
            }
            saveBigSrceenData(params).then((res) => {
                if (res.code == 0) {
                    this.$message({
                        message: '保存成功',
                        type: 'success'
                    })
                    this.$router.go(-1)
                }
            })
        },
        getRowKeys(row) {
            return row.objectId
        },
        handleSelectionChange(val) {
            this.tableData2 = this.removeDuplicatesById(val)
        },
        handleNodeClick(obj) {
            if (this.active == 1) {
                this.listQuery.type = obj.value
                this.$refs.selectTable.bodyWrapper.scrollTop = 0
                this.fetchData()
            }
        },
        filterNode(value, data) {
            if (!value) return true
            return data.name.indexOf(value) !== -1
        },
        async fetchData() {
            let params = { ...this.listQuery }
            for (let key in params) {
                if (!params[key]) {
                    delete params[key]
                }
            }
            this.listLoading = true
            let res = await tableManagerList(params)
            this.listLoading = false
            if (res.code == 0) {
                this.tableData = res.data.records
                this.total = res.data.total
                if (this.tableData2.length > 0) {
                    this.tableData2.forEach(item => {
                        this.$refs.selectTable?.toggleRowSelection(item, true)
                    })
                }
            }
        },
        tabSelect(val) {
            this.active = val
            if (val == 2) {
                this.tableData = []
            } else {
                this.fetchData()
            }
            this.$nextTick(() => {
                if (this.tableData2.length > 0) {
                    this.tableData2.forEach(item => {
                        this.$refs.selectTable?.toggleRowSelection(item, true)
                    })
                }
            })
        },
        handleDelete(row) {
            let targetIndex = 0
            this.tableData2.forEach((item, index) => {
                if (item.objectId == row.objectId) {
                    targetIndex = index
                }
            })
            this.tableData2.splice(targetIndex, 1)
        },
        removeDuplicatesById(arr) {
            if (!Array.isArray(arr)) {
                throw new TypeError('参数必须是一个数组');
            }

            const seen = new Set();
            return arr.filter(item => {
                // 检查对象是否有objectId属性
                if (item && item.objectId !== undefined) {
                    if (seen.has(item.objectId)) {
                        return false;
                    }
                    seen.add(item.objectId);
                    return true;
                }
                // 如果没有objectId属性，保留原对象（可根据需求调整）
                return true;
            });
        }
    },
    mounted() {
        if (this.$route.query.type == 'edit') {
            const rowData = JSON.parse(this.$route.query.rowData)
            getBigSrceenById({ objectId: rowData.objectId }).then(async (res) => {
                if (res.code == 0) {
                    let tables = JSON.parse(res.data.tables)
                    this.ztName = res.data.title
                    this.active = 2
                    let res2 = await tableManagerList({
                        "pageNo": 1,
                        "pageSize": 10000
                    })
                    if (res2.code == 0) {
                        let data = res2.data.records
                        let selectRow = []
                        tables.forEach(id => {
                            data.forEach(item2 => {
                                if (item2.objectId == id) {
                                    selectRow.push(item2)
                                }
                            })
                        })
                        this.tableData2 = selectRow
                    }
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.app-container {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

.tree-box {
    height: 600px;
    overflow-y: auto;
}

.user-unit-box {
    box-sizing: border-box;
    // display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;

    .user-unit-box-left {
        width: 226px;
        margin-right: 10px;
    }

    .user-unit-box-right {
        // width: calc(100% - 226px - 10px);
    }
}

.filter-container {
    margin-bottom: 10px;
    display: flex;
    justify-content: flex-start;
}

.filter-item {
    width: 300px;
    margin-right: 10px;
}


.el-table {
    ::v-deep {
        margin-top: 20px;

        .el-table__header {
            border-radius: 6px;
            overflow: hidden;
        }

        .el-table__cell {
            height: 50px;
            padding: 0;
        }

        .is-leaf {
            background-image: linear-gradient(to top, rgba(128, 191, 255, 1), rgba(51, 153, 255, 1));
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 0px;
            line-height: 24px;
            color: rgba(255, 255, 255, 1);
            border-right: 1px solid white;
        }
    }
}

.edit_content {
    width: 100%;
    height: 44px;
    margin: 0 auto;
    font-size: 14px;
}

.tab_area {
    position: relative;
    width: 100%;
    height: 44px;
}

.tab-conetnt {
    width: 100%;
    height: 44px;
    display: flex;
    justify-content: flex-start;
}

.tabs {
    cursor: pointer;
    box-sizing: border-box;
    width: 130px;
    height: 44px;
    //line-height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    // transition: transform 0.3s ease, box-shadow 0.4s ease;
}

.checked {
    animation: breathe 0.3s ease-in-out infinite;
    animation-iteration-count: 1;
    /* 设置动画只播放一次 */
    // animation-play-state: running;
    // border: 1px solid rgba(38, 172, 255, 1);
    // border-top-left-radius: 10px;
    // border-top-right-radius: 10px;
    // border-bottom: none;
    color: rgba(38, 172, 255, 1);
}

.notChecked {
    color: rgba(128, 128, 128, 1);
    // border-bottom: 2px solid rgba(38, 172, 255, 1);
}

.slider {
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 130px;
    height: 44px;
    border-radius: 10px 10px 0 0;
    border: 2px solid rgba(38, 172, 255, 1);
    /* background-color: #42b983; */
    border-bottom: 2px solid #fff;
    transition: transform 0.3s ease;
    z-index: 0;
}

.line {
    z-index: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    // height: 42px;
    width: 100%;
    border-bottom: 2px solid rgba(38, 172, 255, 1);
}
</style>
